import {createApp, h} from 'vue'
import App from './App.vue'
import './index.css'
import EditTodo from "./components/todos/EditTodo.vue";
import {createRouter, createWebHashHistory, createWebHistory} from 'vue-router'
import NotFound from "./components/NotFound.vue";
import Dashboard from './components/Dashboard.vue'
import Todo from "./components/todos/Todo.vue";
import {createStore} from 'vuex'

const store = createStore({
    state() {
        return {
            count: 1
        }
    },
    mutations: {
        add(state) {
            state.count++;
        }
    }
})

const router = createRouter({
    history: createWebHistory('/base-directory'),
    routes: [
        // {path: '/', name: 'app', component: App},
        {path: '/', name: 'dashboard', component: Dashboard},
        // {path: '/todo', name: 'todo', children: [
        //         {path: '/', component: Todo},
        //     ]},
        {path: '/todo', name: 'todo', component: Todo},
        // {
        //     path: "/:pathMatch(.*)*",
        //     name: 'not-found',
        //     component: NotFound
        // }
    ],
    // scrollBehavior(to, from, savePosition) {
    //     // {x: 10, y: 10} now {left: 10, top: 10}
    //     if(savePosition) {
    //         return savePosition
    //     } else {
    //         return  {top: 0}
    //     }
    // }
})

// // 使用命名导航
// router.resolve({
//     name: 'not-found',
//     params: {
//         pathMatch: ['not', 'found']
//     }
// })

// 动态路由
router.addRoute({
    path: '/about',
    name: 'about',
    component: () => import('./components/About.vue')
})

router.addRoute('about', {
    path: '/about/info',
    name: 'info',
    component: {
        render() {
            return h('div', 'info page')
        }
    }
})

createApp(App)
    .use(router)
    .use(store)
    .component('comp', {render: () => h('div', 'i am comp')})
    .component('EditTodo', EditTodo)
    .directive('hightlight', {
        beforeMount(el, binding, vnode) {
            el.style.background = binding.value
        }
    })
    .mount('#app')
